<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
    <style>
        .container-manage {
            padding: 20px;
        }

        .time-period-layout {
            display: flex;
            gap: 24px;
            margin-top: 20px;
        }

        .left-column {
            flex: 1;
            max-width: 33%;
        }

        .right-column {
            flex: 2;
        }

        .time-period-cards {
            margin-top: 16px;
            max-height: 400px;
            overflow-y: auto;
        }

        .time-period-card {
            margin-bottom: 16px;
            padding: 16px;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            background-color: #f9f9f9;
            cursor: pointer;
            transition: all 0.3s;
        }

        .time-period-card:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
        }

        .time-period-card.active {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .time-input-group {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .time-label {
            width: 70px;
            color: #555;
            margin-right: 8px;
        }

        .period-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .period-header h3 {
            margin-bottom: 0;
            font-size: 16px;
            font-weight: 500;
        }

        .no-period-selected {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 48px 0;
        }

        .total-periods-summary,
        .period-summary {
            display: flex;
            gap: 24px;
            margin-bottom: 16px;
            padding: 12px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }

        .total-periods-summary {
            background-color: #f0f7ff;
            border-left: 4px solid #1890ff;
        }

        .summary-item {
            display: flex;
            align-items: center;
        }

        .summary-label {
            margin-right: 8px;
            font-weight: 500;
            color: #555;
        }

        .summary-value {
            font-size: 16px;
            font-weight: 600;
            color: #1890ff;
        }
    </style>
</head>

<body>
    <div class="container-manage">
        <form class="layui-form" action="" id="showForm">
            <div class="layui-form-item layui-col-xs12">
                <span class="hr-title">基础信息</span>
                <hr>
            </div>

            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">班次名称<font color="red">*</font></label>
                        <div class="layui-input-block">
                            <input type="text" name="shiftName" placeholder="请输入班次名称" autocomplete="off"
                                class="layui-input" lay-verify="required" maxlength="100">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">最小需求人数<font color="red">*</font></label>
                        <div class="layui-input-block">
                            <input type="number" name="minStaff" placeholder="请输入最小需求人数" autocomplete="off"
                                class="layui-input" lay-verify="required|number" min="1" max="999">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大需求人数<font color="red">*</font></label>
                        <div class="layui-input-block">
                            <input type="number" name="maxStaff" placeholder="请输入最大需求人数" autocomplete="off"
                                class="layui-input" lay-verify="required|number" min="1" max="999">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">班次描述</label>
                        <div class="layui-input-block">
                            <textarea name="description" placeholder="请输入班次描述" class="layui-textarea"
                                style="height: 100px;" maxlength="200"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-col-xs12">
                <span class="hr-title">时间段设置</span>
                <hr>
            </div>

            <div class="total-periods-summary">
                <div class="summary-item">
                    <span class="summary-label">所有时间段总最小需求人数:</span>
                    <span class="summary-value" id="allPeriodsMinStaff">0</span>
                </div>
                <div class="summary-item">
                    <span class="summary-label">所有时间段总最大需求人数:</span>
                    <span class="summary-value" id="allPeriodsMaxStaff">0</span>
                </div>
            </div>

            <div class="time-period-layout">
                <div class="left-column">
                    <div class="table-operations">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="addTimePeriod">
                            <i class="layui-icon layui-icon-add-1"></i>
                            添加时间段
                        </button>
                    </div>
                    <div id="timePeriodsContainer" class="time-period-cards">
                        <!-- 时间段项目将通过JavaScript动态添加 -->
                    </div>
                </div>
                <div class="right-column">
                    <div id="periodDetailsContainer" style="display:none;">
                        <div class="period-header">
                            <h3 id="selectedPeriodTitle">时间段详情</h3>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="addWorkstation">
                                <i class="layui-icon layui-icon-add-1"></i>
                                添加工位
                            </button>
                        </div>

                        <div class="period-summary">
                            <div class="summary-item">
                                <span class="summary-label">时间段最小需求人数:</span>
                                <span class="summary-value" id="periodMinStaff">0</span>
                            </div>
                            <div class="summary-item">
                                <span class="summary-label">时间段最大需求人数:</span>
                                <span class="summary-value" id="periodMaxStaff">0</span>
                            </div>
                        </div>



                        <table class="layui-table" id="workstationsTable" lay-filter="workstationsTable">
                            <thead>
                                <tr>
                                    <th lay-data="{field:'index', width:80}">序号</th>
                                    <th lay-data="{field:'name', width:200}">工位名称</th>
                                    <th lay-data="{field:'minStaff', width:120}">最小需求数</th>
                                    <th lay-data="{field:'maxStaff', width:120}">最大需求数</th>
                                    <th lay-data="{field:'action', width:150}">操作</th>
                                </tr>
                            </thead>
                            <tbody id="workstationsTableBody">
                                <!-- 工位列表将通过JavaScript动态添加 -->
                            </tbody>
                        </table>
                    </div>
                    <div id="noPeriodSelected" class="no-period-selected">
                        <div class="layui-empty">
                            <div class="layui-empty-image">
                                <i class="layui-icon layui-icon-face-smile"></i>
                            </div>
                            <p class="layui-empty-description">请选择左侧时间段卡片查看详情</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-col-xs12" style="margin-top: 30px;">
                <div class="layui-input-block">
                    <button class="winui-btn" id="cancle">取消</button>
                    <button class="winui-btn" lay-submit lay-filter="formWriteBean">保存</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 时间段卡片模板 -->
    <script type="text/x-handlebars-template" id="timePeriodTemplate">
        <div class="time-period-card" data-index="{{index}}" id="periodCard_{{index}}">
            <div class="card-header">
                <input type="text" class="layui-input" name="periodName_{{index}}" placeholder="请输入名称" value="{{name}}">
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs remove-period-btn" data-index="{{index}}">
                    <i class="layui-icon layui-icon-close"></i>删除
                </button>
            </div>
            <div class="card-content">
                <div class="time-input-group">
                    <span class="time-label">开始时间:</span>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input time-picker" id="startTime_{{index}}" placeholder="开始时间" value="{{startTime}}" readonly>
                    </div>
                </div>
                <div class="time-input-group">
                    <span class="time-label">结束时间:</span>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input time-picker" id="endTime_{{index}}" placeholder="结束时间" value="{{endTime}}" readonly>
                    </div>
                </div>
                <div class="time-input-group">
                    <span class="time-label">是否跨天:</span>
                    <div class="layui-input-inline winui-radio" id="isNextDay_{{index}}"></div>
                </div>
                <div class="time-input-group">
                    <span class="time-label">背景颜色:</span>
                    <input type="color" id="color_{{index}}" value="{{color}}" class="color-picker" />
                </div>
            </div>
        </div>
    </script>

    <!-- 工位行模板 -->
    <script type="text/x-handlebars-template" id="workstationRowTemplate">
        <tr data-id="{{id}}">
            <td>{{index}}</td>
            <td>{{name}}</td>
            <td>{{minStaff}}</td>
            <td>{{maxStaff}}</td>
            <td>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-normal edit-workstation-btn" data-id="{{id}}">
                    <i class="layui-icon layui-icon-edit"></i>编辑
                </button>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger remove-workstation-btn" data-id="{{id}}">
                    <i class="layui-icon layui-icon-close"></i>删除
                </button>
            </td>
        </tr>
    </script>

    <!-- 工位表单模板 -->
    <script type="text/x-handlebars-template" id="workstationFormTemplate">
        <form class="layui-form" id="workstationForm" style="padding: 20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">工位选择<font color="red">*</font></label>
                <div class="layui-input-block">
                    <select name="workId" lay-verify="required" lay-filter="workIdSelect" lay-search>
                        <option value="">请选择工位</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">最小需求数<font color="red">*</font></label>
                <div class="layui-input-block">
                    <input type="number" name="minStaff" placeholder="请输入最小需求数" class="layui-input" lay-verify="required|number" min="0" max="999" value="{{minStaff}}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">最大需求数<font color="red">*</font></label>
                <div class="layui-input-block">
                    <input type="number" name="maxStaff" placeholder="请输入最大需求数" class="layui-input" lay-verify="required|number" min="0" max="999" value="{{maxStaff}}">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="workstationSubmit">确定</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="closeWorkstationForm">取消</button>
                </div>
            </div>
        </form>
    </script>

    <script src="../../assets/lib/layui/layui.js"></script>
    <script src="../../assets/lib/layui/custom.js"></script>
    <!-- 修改 Sortable.js 引用，添加错误处理并提供备用方案 -->
    <script type="text/javascript">
        // 定义一个简单的 Sortable 替代方案，在原始库加载失败时使用
        window.SortableFallback = function (el, options) {
            console.log('使用 Sortable 替代方案 - 拖拽功能将不可用');
            this.options = options || {};

            // 模拟 Sortable 的接口，但不提供实际功能
            this.destroy = function () { };
            this.option = function () { };
            this.sort = function () { };
        };

        // 尝试从多个源加载 Sortable.js
        function loadSortableJS() {
            // 创建脚本元素
            var script = document.createElement('script');
            script.type = 'text/javascript';

            // 设置加载超时
            var timeoutId = setTimeout(function () {
                console.warn('Sortable.js 加载超时，将使用替代方案');
                window.Sortable = window.SortableFallback;
                script.onload = null;
                script.onerror = null;
            }, 5000);

            // 加载成功处理
            script.onload = function () {
                clearTimeout(timeoutId);
                console.log('Sortable.js 加载成功');
            };

            // 加载失败处理
            script.onerror = function () {
                clearTimeout(timeoutId);
                console.warn('Sortable.js 加载失败，尝试替代方案');

                // 尝试从备用CDN加载
                var backupScript = document.createElement('script');
                backupScript.type = 'text/javascript';

                var backupTimeoutId = setTimeout(function () {
                    console.warn('备用 Sortable.js 加载超时，将使用替代方案');
                    window.Sortable = window.SortableFallback;
                    backupScript.onload = null;
                    backupScript.onerror = null;
                }, 5000);

                backupScript.onload = function () {
                    clearTimeout(backupTimeoutId);
                    console.log('备用 Sortable.js 加载成功');
                };

                backupScript.onerror = function () {
                    clearTimeout(backupTimeoutId);
                    console.warn('所有 Sortable.js 加载尝试均失败，使用替代方案');
                    window.Sortable = window.SortableFallback;
                };

                // 尝试从另一个CDN加载
                backupScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js';
                document.head.appendChild(backupScript);
            };

            // 首先尝试从原始CDN加载
            script.src = 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js';
            document.head.appendChild(script);
        }

        // 加载 Sortable.js
        loadSortableJS();
    </script>
    <script type="text/javascript">
        layui.config({ base: '../../js/schedulManagement/' }).use('writeSchedul');
    </script>
</body>

</html>